<template>
  <div class="table-advanced-panel">
    <h3 class="text-sm font-medium text-gray-700 mb-4">高级选项</h3>

    <!-- MySQL 特定选项 -->
    <template v-if="databaseType === 'mysql'">
      <div class="grid grid-cols-2 gap-4 mb-4">
        <div class="space-y-1">
          <label class="block text-xs font-medium text-gray-500 mb-1">行格式 (ROW_FORMAT)</label>
          <el-select 
            v-model="advancedOptions.rowFormat" 
            size="small" 
            style="width: 100%" 
            @change="handleOptionsUpdate"
            class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
          >
            <el-option label="默认" value="DEFAULT" />
            <el-option label="动态" value="DYNAMIC" />
            <el-option label="固定" value="FIXED" />
            <el-option label="压缩" value="COMPRESSED" />
            <el-option label="冗余" value="REDUNDANT" />
            <el-option label="紧凑" value="COMPACT" />
          </el-select>
        </div>
        <div class="space-y-1">
          <label class="block text-xs font-medium text-gray-500 mb-1">存储引擎</label>
          <el-select 
            v-model="advancedOptions.engine" 
            size="small" 
            style="width: 100%" 
            @change="handleOptionsUpdate"
            class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
          >
            <el-option label="InnoDB" value="InnoDB" />
            <el-option label="MyISAM" value="MyISAM" />
            <el-option label="MEMORY" value="MEMORY" />
            <el-option label="CSV" value="CSV" />
            <el-option label="ARCHIVE" value="ARCHIVE" />
          </el-select>
        </div>
        <div class="space-y-1">
          <label class="block text-xs font-medium text-gray-500 mb-1">自动增长值</label>
          <el-input-number 
            v-model="advancedOptions.autoIncrement" 
            :min="1"
            size="small" 
            style="width: 100%" 
            @change="handleOptionsUpdate" 
            class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
          />
        </div>
        <div class="space-y-1">
          <label class="block text-xs font-medium text-gray-500 mb-1">AVG 行长</label>
          <el-input-number 
            v-model="advancedOptions.avgRowLength" 
            :min="0" 
            size="small" 
            style="width: 100%" 
            @change="handleOptionsUpdate" 
            class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
          />
        </div>
      </div>

      <div class="grid grid-cols-1 gap-4 mb-4">
        <div class="space-y-1">
          <label class="block text-xs font-medium text-gray-500 mb-1">表空间</label>
          <el-input 
            v-model="advancedOptions.tablespace" 
            size="small" 
            placeholder="表空间名" 
            @change="handleOptionsUpdate" 
            class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
          />
        </div>
        <div class="space-y-1">
          <label class="block text-xs font-medium text-gray-500 mb-1">KEY_BLOCK_SIZE</label>
          <el-input-number 
            v-model="advancedOptions.keyBlockSize" 
            :min="0" 
            size="small" 
            style="width: 100%" 
            @change="handleOptionsUpdate" 
            class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
          />
        </div>
      </div>

      <div class="mb-4 p-2 bg-gray-50 rounded-md border border-gray-200">
        <el-checkbox 
          v-model="advancedOptions.checksum" 
          @change="handleOptionsUpdate"
          class="hover:text-blue-600 transition-colors"
        >
          启用表校验和 (CHECKSUM)
        </el-checkbox>
      </div>
      
      <div class="mb-4 p-2 bg-gray-50 rounded-md border border-gray-200">
        <el-checkbox 
          v-model="advancedOptions.packKeys" 
          @change="handleOptionsUpdate"
          class="hover:text-blue-600 transition-colors"
        >
          压缩索引 (PACK_KEYS)
        </el-checkbox>
      </div>
      
      <div class="mb-4 p-2 bg-gray-50 rounded-md border border-gray-200">
        <el-checkbox 
          v-model="advancedOptions.delayKeyWrite" 
          @change="handleOptionsUpdate"
          class="hover:text-blue-600 transition-colors"
        >
          延迟键写入 (DELAY_KEY_WRITE)
        </el-checkbox>
      </div>

      <div class="mb-4 space-y-1">
        <label class="block text-xs font-medium text-gray-500 mb-1">分区选项</label>
        <el-input 
          v-model="advancedOptions.partition" 
          type="textarea" 
          :rows="3" 
          placeholder="PARTITION BY..." 
          @change="handleOptionsUpdate" 
          class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
        />
      </div>
    </template>

    <!-- PostgreSQL 特定选项 -->
    <template v-else-if="databaseType === 'postgresql'">
      <div class="grid grid-cols-2 gap-4 mb-4">
        <div class="space-y-1">
          <label class="block text-xs font-medium text-gray-500 mb-1">模式 (Schema)</label>
          <el-input 
            v-model="advancedOptions.schema" 
            size="small" 
            placeholder="public" 
            @change="handleOptionsUpdate" 
            class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
          />
        </div>
        <div class="space-y-1">
          <label class="block text-xs font-medium text-gray-500 mb-1">表空间</label>
          <el-input 
            v-model="advancedOptions.tablespace" 
            size="small" 
            placeholder="表空间名" 
            @change="handleOptionsUpdate" 
            class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
          />
        </div>
        <div class="space-y-1">
          <label class="block text-xs font-medium text-gray-500 mb-1">填充因子 (FILLFACTOR)</label>
          <el-slider 
            v-model="advancedOptions.fillfactor" 
            :min="10" 
            :max="100"
            :step="5"
            show-input
            @change="handleOptionsUpdate" 
            class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
          />
        </div>
        <div class="space-y-1">
          <label class="block text-xs font-medium text-gray-500 mb-1">自动真空 (AUTOVACUUM)</label>
          <el-select 
            v-model="advancedOptions.autovacuum" 
            size="small" 
            style="width: 100%" 
            @change="handleOptionsUpdate"
            class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
          >
            <el-option label="默认" value="DEFAULT" />
            <el-option label="启用" value="ON" />
            <el-option label="禁用" value="OFF" />
          </el-select>
        </div>
      </div>
      
      <div class="mb-4 p-2 bg-gray-50 rounded-md border border-gray-200">
        <el-checkbox 
          v-model="advancedOptions.withOids" 
          @change="handleOptionsUpdate"
          class="hover:text-blue-600 transition-colors"
        >
          使用 OIDs (WITH OIDS)
        </el-checkbox>
      </div>
      
      <div class="mb-4 space-y-1">
        <label class="block text-xs font-medium text-gray-500 mb-1">存储参数 (WITH)</label>
        <el-input 
          v-model="advancedOptions.storageParameters" 
          type="textarea" 
          :rows="3" 
          placeholder="autovacuum_vacuum_threshold=100, autovacuum_analyze_threshold=200..." 
          @change="handleOptionsUpdate"
          class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all" 
        />
      </div>
    </template>

    <!-- 达梦数据库特定选项 -->
    <template v-else-if="databaseType === 'dameng'">
      <div class="grid grid-cols-2 gap-4 mb-4">
        <div class="space-y-1">
          <label class="block text-xs font-medium text-gray-500 mb-1">默认字符长度语义</label>
          <el-select 
            v-model="advancedOptions.lengthSemantics" 
            size="small" 
            style="width: 100%" 
            @change="handleOptionsUpdate"
            class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
          >
            <el-option label="字节语义 (BYTE)" value="BYTE" />
            <el-option label="字符语义 (CHAR)" value="CHAR" />
          </el-select>
        </div>
        <div class="space-y-1">
          <label class="block text-xs font-medium text-gray-500 mb-1">字符集</label>
          <el-select 
            v-model="advancedOptions.charset" 
            size="small" 
            style="width: 100%" 
            @change="handleOptionsUpdate"
            class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
          >
            <el-option label="UTF8" value="UTF8" />
            <el-option label="GBK" value="GBK" />
            <el-option label="GB18030" value="GB18030" />
            <el-option label="BIG5" value="BIG5" />
            <el-option label="UTF16" value="UTF16" />
          </el-select>
        </div>
      </div>
      
      <div class="space-y-1 mb-4">
        <label class="block text-xs font-medium text-gray-500 mb-1">表空间</label>
        <el-input 
          v-model="advancedOptions.tablespace" 
          size="small" 
          placeholder="表空间名" 
          @change="handleOptionsUpdate" 
          class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
        />
      </div>
    </template>

    <!-- 通用选项 (适用于所有数据库类型) -->
    <div class="mb-4 space-y-1">
      <label class="block text-xs font-medium text-gray-500 mb-1">自定义选项</label>
      <el-input 
        v-model="advancedOptions.custom" 
        type="textarea" 
        :rows="3" 
        :placeholder="customPlaceholder" 
        @change="handleOptionsUpdate" 
        class="hover:border-gray-400 focus:ring-1 focus:ring-blue-500 transition-all"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue';

const props = defineProps({
  advancedOptions: {
    type: Object,
    default: () => ({})
  },
  databaseType: {
    type: String,
    default: 'mysql'
  }
});

const emit = defineEmits(['update']);

// 创建本地副本以避免直接修改props
const localOptions = ref({
  // MySQL选项
  rowFormat: props.advancedOptions.rowFormat || 'DEFAULT',
  engine: props.advancedOptions.engine || 'InnoDB',
  autoIncrement: props.advancedOptions.autoIncrement || 1,
  avgRowLength: props.advancedOptions.avgRowLength || 0,
  tablespace: props.advancedOptions.tablespace || '',
  keyBlockSize: props.advancedOptions.keyBlockSize || 0,
  checksum: props.advancedOptions.checksum || false,
  packKeys: props.advancedOptions.packKeys || false,
  delayKeyWrite: props.advancedOptions.delayKeyWrite || false,
  partition: props.advancedOptions.partition || '',
  
  // PostgreSQL选项
  schema: props.advancedOptions.schema || 'public',
  fillfactor: props.advancedOptions.fillfactor || 100,
  autovacuum: props.advancedOptions.autovacuum || 'DEFAULT',
  withOids: props.advancedOptions.withOids || false,
  storageParameters: props.advancedOptions.storageParameters || '',
  
  // 达梦数据库选项
  lengthSemantics: props.advancedOptions.lengthSemantics || 'BYTE',
  charset: props.advancedOptions.charset || 'UTF8',
  
  // 通用选项
  custom: props.advancedOptions.custom || ''
});

// 根据数据库类型显示不同的自定义选项占位符
const customPlaceholder = computed(() => {
  switch (props.databaseType) {
    case 'mysql':
      return '例如: AUTO_INCREMENT=100 CHARACTER SET=utf8mb4 COLLATE=utf8mb4_general_ci';
    case 'postgresql':
      return '例如: INHERITS (parent_table)';
    case 'sqlserver':
      return '例如: ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]';
    case 'dameng':
      return '输入达梦数据库特定的附加选项';
    default:
      return '输入数据库特定的附加选项';
  }
});

// 监听props变化
watch(() => props.advancedOptions, (newOptions) => {
  // 更新MySQL选项
  localOptions.value.rowFormat = newOptions.rowFormat || 'DEFAULT';
  localOptions.value.engine = newOptions.engine || 'InnoDB';
  localOptions.value.autoIncrement = newOptions.autoIncrement || 1;
  localOptions.value.avgRowLength = newOptions.avgRowLength || 0;
  localOptions.value.tablespace = newOptions.tablespace || '';
  localOptions.value.keyBlockSize = newOptions.keyBlockSize || 0;
  localOptions.value.checksum = newOptions.checksum || false;
  localOptions.value.packKeys = newOptions.packKeys || false;
  localOptions.value.delayKeyWrite = newOptions.delayKeyWrite || false;
  localOptions.value.partition = newOptions.partition || '';
  
  // 更新PostgreSQL选项
  localOptions.value.schema = newOptions.schema || 'public';
  localOptions.value.fillfactor = newOptions.fillfactor || 100;
  localOptions.value.autovacuum = newOptions.autovacuum || 'DEFAULT';
  localOptions.value.withOids = newOptions.withOids || false;
  localOptions.value.storageParameters = newOptions.storageParameters || '';
  
  // 更新达梦数据库选项
  localOptions.value.lengthSemantics = newOptions.lengthSemantics || 'BYTE';
  localOptions.value.charset = newOptions.charset || 'UTF8';
  
  // 更新通用选项
  localOptions.value.custom = newOptions.custom || '';
}, { deep: true });

// 代理所有选项访问
const advancedOptions = computed({
  get() {
    return localOptions.value;
  },
  set(newValue) {
    localOptions.value = newValue;
  }
});

// 更新选项
const handleOptionsUpdate = () => {
  emit('update', { ...localOptions.value });
};
</script>

<style scoped>
.table-advanced-panel {
  padding: 16px 0;
}

:deep(.el-input__wrapper) {
  @apply shadow-none rounded-md;
}

:deep(.el-input__wrapper:hover) {
  @apply border-gray-400;
}

:deep(.el-input__wrapper.is-focus) {
  @apply border-blue-500 ring-1 ring-blue-500;
}

:deep(.el-select .el-input__wrapper) {
  @apply shadow-none;
}

:deep(.el-select-dropdown__item) {
  @apply text-sm py-2;
}

:deep(.el-textarea__inner) {
  @apply rounded-md border-gray-300 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 transition-all;
}

:deep(.el-textarea__inner:hover) {
  @apply border-gray-400;
}

:deep(.el-checkbox__inner) {
  @apply transition-all;
}

:deep(.el-checkbox__inner:hover) {
  @apply border-blue-500;
}

:deep(.el-slider__runway) {
  @apply bg-gray-200;
}

:deep(.el-slider__bar) {
  @apply bg-blue-500;
}

:deep(.el-slider__button) {
  @apply border-blue-500;
}

:deep(.el-slider__button:hover) {
  @apply transform scale-110 transition-all;
}

:deep(.el-input-number) {
  @apply w-full;
}

:deep(.el-input-number .el-input__wrapper) {
  @apply rounded-md;
}

:deep(.el-input-number__decrease),
:deep(.el-input-number__increase) {
  @apply border-gray-300 text-gray-500 hover:text-blue-500 hover:bg-blue-50 transition-colors;
}
</style> 